<template>
  <div class="container">
    <global-header :user="user"/>
    <column-list :list="list"/>
    <form>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱</label>
        <validate-input
          :rules="emailRules"
          v-model="emailRef"
          type="text"
          placeholder="请输入邮箱"
        />
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <validate-input
          :rules="passwordRules"
          v-model="pwdRef"
          type="password"
          placeholder="请输入密码"
        />
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">同意协议</label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ValidateInput, { RulesProp } from './components/ValidateInput.vue'
const listData: ColumnProps[] = [
  {
    id: 1,
    title: 'test专栏1',
    description: '哈哈哈',
    avatar: 'https://vue3js.cn/docs/logo.png'
  },
  {
    id: 2,
    title: 'test专栏2',
    description: '哈哈哈',
    avatar: 'https://vue3js.cn/docs/logo.png'
  },
  {
    id: 3,
    title: 'test专栏2',
    description: '哈哈哈',
    avatar: 'https://vue3js.cn/docs/logo.png'
  },
  {
    id: 4,
    title: 'test专栏2',
    description: '哈哈哈',
    avatar: ''
  }
]

const user: UserProps = {
  isLogin: true,
  name: 'curry'
}
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHeader,
    ValidateInput
  },
  setup () {
    // 邮箱验证
    const emailRules: RulesProp = reactive([
      {
        type: 'required',
        message: '邮箱不能为空'
      },
      {
        type: 'email',
        message: '邮箱格式不对'
      }
    ])
    // 密码验证
    const passwordRules: RulesProp = reactive([
      {
        type: 'required',
        message: '密码不能为空'
      }
    ])

    const emailRef = ref('')
    const pwdRef = ref('')
    return {
      list: listData,
      user: user,
      emailRules,
      passwordRules,
      emailRef,
      pwdRef
    }
  }
})

</script>

<style lang="less">
</style>
